<template>
  <div style="height: 100%">
    <div class="waterdom borderRidus boxShadow first_width">
      <modelTitle :title="'UPW化学品耗量'" />
      <div class="model_chart">
        <chartsUpwChemistry width="'100%'" :height="'100%'" />
      </div>
    </div>
  </div>
</template>

<script setup>
import chartsUpwChemistry from "./components/chartsUpwChemistry.vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
</script>
<style scoped lang="scss">
.waterdom {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
}

.first_width {
  width: calc(100% - 16px);
}

.main_chart_dom {
  height: 286px;
  margin-top: 16px;
}

.model_chart {
  width: 100%;
  height: calc(100% - 40px);
}
</style>
